<template>
    <div>
        <p>{{ obj.hobby.eat }}</p>
        <button @click="obj.hobby.eat = '面条'">click</button>
    </div>

    <hr>


    <p @click="num += 1"> {{ num }}</p>

    <p @click="age += 1"> {{ age }}</p>
</template>

<script>
import { reactive, watch, ref } from 'vue'
export default {
    setup () {
        const obj = reactive({
            hobby: {
                eat: '西瓜'
            }
        })

        watch(obj, (newVal, oldVal) => {
            console.log('new', newVal);
            console.log('oldVal', oldVal);
            console.log(newVal === oldVal);
        }, {

            deep: true,
        }
        )
        // watch(obj.hobby
        //     , (newVal, oldVal) => {
        //         console.log('new', newVal);
        //         console.log('oldVal', oldVal);
        //         console.log(newVal === oldVal);
        //     })

        // 深度监听 建议写成 函数式
        watch(() => obj.hobby.eat
            , (newVal, oldVal) => {
                console.log('new', newVal);
                console.log('oldVal', oldVal);
                console.log(newVal === oldVal);
            })


        const num = ref(10)
        // watch(num, (newVal, old) => {
        //     console.log(newVal);
        //     console.log(old);
        // }, {
        //     immediate: true   // 一上来就触发一次
        // })

        const age = ref(10)

        // 多个数据监听
        watch([num, age, obj], (newVal, oldVal) => {
            console.log(newVal);
        })

        return {
            obj, num,
            age
        }
    },

    // watch: {

    // },
    // methods:{}
}
</script>